<!-- 服务方选择 -->
<template>
	<view>
		<!-- title -->
		<uni-nav-bar title="服务方" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true" />
		<!-- search -->
		<search @goSearch="goSearch" />
		<!-- content -->
		<view class="main" v-if="organizationList.length > 0">
			<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() + 'px'}"
				@scrolltolower="handleScrolltolowerone()">
				<view v-for="item in organizationList" :key="item.id" class="item" @click.stop="chooseServer(item)">
					<view class="top">
						<view class="top-left">
							<image
								:src="item.organizationPicture?item.organizationPicture:'../../../../../../static/push/36x36.png'"
								mode=""></image>
						</view>
						<view class="top-right">
							<view class="title">
								{{item.name}}
							</view>
							<view class="project">
								<view class="project-title">
									服务项目：
								</view>
								<view class="project-item" v-show="index<5"
									v-for="(it,index) in item.serviceProjectList" :key="it.id">
									{{it.name}}
								</view>
							<!-- 	<view class="project-item" v-show="index<4"
									v-for="(it,index) in item.serviceProjectList" :key="it.id">
									{{it.name}}
								</view>
								<view v-if="item.serviceProjectList.length>4 " style="color: #80A7FF;">
									...
								</view> -->
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="bottom-left">
							<view class="introduce">
								<view class="introduce-title">
									服务时间：
								</view>
								<template v-if="item.startTime && item.endTime">
									{{item.startTime}}-{{item.endTime}}
								</template>
							</view>
							<view class="introduce it">
								<view class="introduce-title">
									地址：
								</view>
								{{item.address}}
							</view>
							<view class="introduce it">
								<view class="introduce-title">
									服务评分：
								</view>
								<uni-rate size="16" :count="5" readonly allowHalf="true" :value="item.avgScore"
									active-color="#FF6060" />
								<view class="rate">
									{{item.avgScore}}分
								</view>
							</view>
						</view>
						<view class="bottom-right">
							<view class="introduce">
								<view class="introduce-title">
									电话：
								</view>
								{{item.contactPhone}}
							</view>
							<view class="introduce" style="margin-top: 20rpx;">
								<view class="introduce-title">
									距离：
								</view>
								{{item.distance}}
							</view>
							<view class="appraise" @click.stop="goAppraise(item)">
								<u-icon name="eye" color="#2979ff" size="24"></u-icon>
								<view class="appraise-title">
									查看评价内容
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-ios-lineline">

				</view>
				<view class="bottom-ios-line">

				</view>
			</scroll-view>
		</view>
		<!-- noDate -->
		<view v-else>
			<view class="blank">
				<image src="@/static/blank.png" mode=""></image>
				<view class="nodata">
					暂无数据
				</view>
			</view>
		</view>
		<u-loading-icon :show="loading" size="36" />
		<!-- 3.底部tabbar -->
		<bottomTabar />
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
	import API from '@/api/socialized-servce/farm-service/normalUser/serviceSelect/service-organization/index.js'
	import bottomTabar from '../../../components/normalUser-tabar/index.vue'
	import search from '../../../components/search/index.vue'

	export default {
		components: {
			bottomTabar,
			search
		},
		data() {
			return {
				keyWord: '',
				page: 1,
				total: 0,
				totalPages: 0,
				loading: false,
				serviceTypeNo: '',
				organizationList: [],
				geoText: '',
				serviceTypeName: ''
			}
		},
		mounted() {
			let myarableInfo = uni.getStorageSync('myarableInfo')
			this.geoText = myarableInfo.geoText
			this.serviceTypeName = uni.getStorageSync('serviceTypeName')
			this.serviceTypeNo = uni.getStorageSync('serviceTypeNo')
			this.setcollapseheight()
			this.getServiceOrganization()
		},
		methods: {
			// 服务方分页查询
			async getServiceOrganization() {
				if (this.loading) return
				this.loading = true
				let params = {
					page: this.page,
					size: 10,
					condition: {
						serviceTypeNo: this.serviceTypeNo,
						name: this.keyWord,
						geoText: this.serviceTypeName === "农机服务" ? this.geoText : null,
					}
				}
				let res = await API.serviceOrganization(params)
				if (res.code === 200) {
					this.total = res.data.totalElements
					this.totalPages = res.data.totalPages
					let newList = res.data.content
					if (this.page === 1) {
						this.organizationList = newList
					} else {
						this.organizationList = [...this.organizationList, ...newList]
					}
					this.loading = false
				} else {
					this.loading = true
				}
			},
			// 触底
			async handleScrolltolowerone() {
				if (this.loading) return;
				// console.log('触底');
				if (this.page <= this.totalPages && this.page * 10 < this.total) {
					this.page++
					this.getServiceOrganization()
				}
			},
			goSearch(keyWord) {
				this.keyWord = keyWord
				this.page = 1
				this.getServiceOrganization()
			},
			// 评价详情
			goAppraise(e) {
				console.log(e, '评价详情');
				uni.redirectTo({
					url: `/subPage1/socialized-service/farm-service/normalUser/serviceSelect/service-organization/appraise-content?organizationNo=${e.organizationNo}`
				})
			},
			// 选择服务方
			chooseServer(item) {
				uni.setStorageSync('organizationNo',item.organizationNo)
				uni.setStorageSync('projectObj', JSON.stringify(item))
				uni.redirectTo({
					url: `/subPage1/socialized-service/farm-service/normalUser/serviceSelect/service-organization/service-order`
				})
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(260)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight - 10

				// #endif
				return winHeight
			},
			back() {
				if (this.serviceTypeName === '农机服务') {
					uni.redirectTo({
						url: '/subPage1/socialized-service/farm-service/normalUser/my-arable/my-arable'
					})
				} else {
					uni.redirectTo({
						url: '/subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
		background: #F5F6FA;

		.item {
			box-sizing: border-box;
			// height: 314rpx;
			padding: 30rpx;
			margin: 0 40rpx;
			margin-bottom: 18rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
			border-radius: 5px 5px 5px 5px;
			overflow: hidden;

			.top {
				display: flex;
				height: 138rpx;
				width: 100%;

				.top-left {
					width: 208rpx;
					height: 100%;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.top-right {
					width: 100%;
					height: 100%;

					.title {
						font-size: 32rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: bold;
						color: #91743E;
					}

					.project {
						display: flex;
						align-items: center;
						// margin-top: 10rpx;
						flex-wrap: wrap;

						.project-title {
							margin-right: 10rpx;
						}

						.project-item {
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							padding: 4rpx 15rpx;
							background: #FFFFFF;
							border-radius: 28rpx;
							border: 2rpx solid #80A7FF;
							color: #80A7FF;
						}
					}
				}
			}

			.bottom {
				position: relative;
				display: flex;
				margin-top: 20rpx;
				width: 100%;
				height: calc(100% - 138rpx);

				.bottom-left {
					flex: 60%;

					.it {
						margin-top: 10rpx;
					}

					.introduce {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-family: Arial-Regular, Arial;
						font-weight: 400;
						color: #222222;

						.introduce-title {
							font-size: 24rpx;
							color: #5C5C5C;
							min-width: 80rpx;
						}

						.rate {
							margin-left: 5rpx;
							color: #FF6060;
						}
					}
				}

				.bottom-right {
					flex: 40%;

					.introduce {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-family: Arial-Regular, Arial;
						font-weight: 400;
						color: #222222;

						.introduce-title {
							font-size: 24rpx;
							color: #5C5C5C;
						}
					}

					.appraise {
						display: flex;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #2265FB;

						.appraise-title {
							margin-left: 5rpx;
						}
					}
				}
			}
		}
	}

	.blank {
		position: absolute;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.nodata {
			margin-top: 20rpx;
		}
	}
</style>